<template>
	<view class="container">
		<!-- 机构汇总 -->
		<view class="page-foot">
			<Footer :identity="4" :footState="0"></Footer>
		</view>
		<view class="summary-card">
			<view class="summary-title">机构汇总</view>
			<view class="summary-stats">
				<view class="stat-item">
					<text class="stat-label">机构总数</text>
					<text class="stat-value">{{ summary.allsum }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">已开单机构数</text>
					<text class="stat-value">{{ summary.asum }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">未开单机构数</text>
					<text class="stat-value">{{ summary.bsum }}</text>
				</view>
			</view>
		</view>

		<!-- 我的机构 -->
		<view class="section-title">我的机构</view>
		<view class="agency-list" v-if="agencyList.length > 0">
			<view class="agency-item" v-for="item in agencyList" :key="item.id">
				<view class="agency-info">
					<view class="agency-name flex-box flex-between">
						<view>门店名称：{{ item.shop_name }}</view>
						<view class="tc" @click="openLocation(item.lat, item.lng)">
							<image src="@/static/images/xilu_guide.png" mode="aspectFill" class="ico30 mt5"></image>
							<view class="col9 fs24 mt10 lh34">导航</view>
						</view>
						
					</view> 
					<view class="agency-sub">联系人：{{ item.shop_contacts }}</view>
					<view class="agency-sub">手机号：{{ item.shop_mobile }}</view>
					<view class="agency-sub">地址：{{ item.address }}</view>
				</view>
				
			</view>
		</view>
		<view v-else>
			<empty-data :tips="'暂无门店'" :lineHeight="100"></empty-data>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			summary: {
				total: 6,
				opened: 2,
				unopened: 4
			},
			agencyList: [
				
			]
		}
	},
	onLoad() {
			this.getAgencyList()
			this.getShopSum()
	},
	methods: {
		openLocation(lat, lng) {
			this.$api.openLocation(lat, lng);
		},
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/staff_detail/staff_detail?id=${item.id}&name=${item.name}`
			});
		},
		getShopSum() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/staff/getShopSum',
					method: 'get'
				}).then(res => {
					_this.summary = res.data
				}).catch(error => {
					console.log('coachInfoError', error);
				})
		},
		getAgencyList() {
			let _this = this;
			this.$http({
				url: '/addons/xilufitness/staff/getShopList',
				data:{
					// status: 1
				},
				method: 'get'
			}).then(res => {
				_this.agencyList = res.data.list
			}).catch(error => {
				console.log('coachInfoError', error);
			})
		}
		
	}
		
			
		
	
}
</script>

<style scoped>
.container {
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	padding: 32rpx;
	box-sizing: border-box;
}
.summary-card {
	background-color: #1a1a1a;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 48rpx;
}
.summary-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
}
.summary-stats {
	display: flex;
	justify-content: space-between;
}
.stat-item {
	text-align: center;
}
.stat-label {
	color: #aaa;
	font-size: 24rpx;
}
.stat-value {
	font-size: 36rpx;
	font-weight: bold;
	margin-top: 8rpx;
}

.section-title {
	font-size: 32rpx;
	margin-bottom: 24rpx;
	font-weight: bold;
}

.agency-list {
	border-radius: 16rpx;
	overflow: hidden;
}
.agency-item {
	background-color: #1a1a1a;
	padding: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #333;
}
.agency-info {
	width: 100%;
}
.agency-info .agency-name {
	font-size: 28rpx;
	font-weight: bold;
}
.agency-sub {
	color: #888;
	font-size: 24rpx;
	margin-top: 6rpx;
}
.agency-cashback {
	font-size: 30rpx;
	color: #ffcf00;
}
</style>
